<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import useModal from '@/hooks/useModal'
import useOptions from '@/hooks/useOptions'
const props = defineProps<{
  show: boolean
  id: number | string
  edit?: boolean
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const { store } = useModal()
const detail = reactive({
  categoryId: '',
  id: '',
  legalPerson: '',
  licenseImg: '',
  mobile: '',
  name: '',
  smsCode: '1234',
  typeId: '',
})
const { options: classify } = useOptions({
  api: '/server-shop/admin/seller/category/list',
})
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      post(
        { url: '/server-shop/admin/seller/apply/save', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-shop/admin/seller/apply/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
  })
}
onMounted(() => {
  if (props.id) getInfo()
})
const title = computed(() => {
  if (props.id) return props.edit ? '编辑' : '查看'
  else return '新建'
})
</script>
<template>
  <CDrawer v-model:visible="props.show" :footer="props.edit" @before-ok="submit" width="500px" :title="title" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" :disabled="!props.edit" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item label="商户名称" field="name" :rules="[{ required: true, message: '请输入商户名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入商户名称" />
        </a-form-item>
        <a-form-item label="商户分类" field="name" :rules="[{ required: true, message: '请输入商户分类' }]" :validate-trigger="['change', 'blur']">
          <a-select :options="classify" v-model="detail.categoryId" placeholder="请选择" />
        </a-form-item>

        <a-form-item label="负责人" field="name" :rules="[{ required: true, message: '请输入优惠券名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.legalPerson" placeholder="请输入优惠券名称" />
        </a-form-item>
        <a-form-item label="手机号码" field="name" :rules="[{ required: true, message: '请输入优惠券名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.mobile" placeholder="请输入优惠券名称" />
        </a-form-item>
        <a-form-item label="资质图" field="name" :rules="[{ required: true, message: '请输入优惠券名称' }]" :validate-trigger="['change', 'blur']">
          <Upload v-model:value="detail.licenseImg" :list="detail.licenseImg" :disabled="!props.edit" />
        </a-form-item>
      </a-form>
    </div>
  </CDrawer>
</template>
<style lang="less" scoped></style>
